<template>
    <div class="long-text">
      <div>{{ truncatedText }}</div>
      <el-button type="text" @click="toggleShowAll" v-if="isExpanded">{{showAll?'收起':'展开'}}</el-button>
    </div>
  </template>
   
  <script>
  export default {
    props: {
      text: {
        type: String,
        required: true
      },
      maxLength: {
        type: Number,
        default: 20
      }
    },
    data() {
      return {
        showAll: false,
        localMaxLength: this.maxLength,
      }
    },
    computed:{
      truncatedText() {
        if (this.text.length <= this.localMaxLength) {
          return this.text;
        }
        return `${this.text.substring(0, this.maxLength)}...`;
      },
      isExpanded(){
        return this.text.length > this.maxLength;
      }
    },
    methods: {
      toggleShowAll() {
        if(this.showAll){   //true->false
            this.localMaxLength=this.maxLength;;
        }
        if(!this.showAll){
          this.localMaxLength=Infinity;
        }
        this.showAll = !this.showAll
      }
    }
  }
  </script>
   
  <style scoped>
  .long-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  </style>